<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('产品CYCLE TIME统计')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="cycletime">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label class="control-label is-required">月份：</label>
                                <input type="text" class="input-sm" id="timeFlag" name="timeFlag" required/>
                            </li>
                            <li>
                                <label>产品类型：</label>
                                <select name="materialType" th:with="si=${partTypeList}">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${si}" th:text="${dict.materialType}" th:value="${dict.materialType}"></option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="report:partcycletimesta:export">
                    <i class="fa fa-download"></i> 导出
                </a>
            </div>

            <div class="col-sm-12 select-table ">
                <table id="bootstrap-table"></table>
            </div>

            <div class="row">
                <div class="col-sm-10">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>每月产品CYCLE TIME折线图</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-line-chart" style="height: 500px;"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">
        const prefix = ctx + "report/partcycletimesta";
        var column = [
            {
                field: 'NO',
                title: "序号",
                width: 50,
                formatter: function (value, row, index) {
                    return $.table.serialNumber(index);
                }
            },
            {
                field: 'timeFlagYearMonth',
                title: '月份',
                cellStyle: function(value, row, index){
                    if (row.materialType === "总计") {
                        return { css: { "color": "#9108ec", "font-weight": "700" } };
                    } else {
                        return { css: { "color": "black", "font-weight": "normal" } };
                    }
                }
            },
            {
                field: 'materialType',
                title: '产品类型',
                cellStyle: function(value, row, index){
                    if (row.materialType === "总计") {
                        return { css: { "color": "#9108ec", "font-weight": "700" } };
                    } else {
                        return { css: { "color": "black", "font-weight": "normal" } };
                    }
                }
            },
            {
                field: 'qty',
                title: '出片数',
                cellStyle: function(value, row, index){
                    if (row.materialType === "总计") {
                        return { css: { "color": "#9108ec", "font-weight": "700" } };
                    } else {
                        return { css: { "color": "black", "font-weight": "normal" } };
                    }
                }
            },
            {
                field: 'partAverDays',
                title: '平均cycle time(天)',
                cellStyle: function(value, row, index){
                    if (row.materialType === "总计") {
                        return { css: { "color": "#9108ec", "font-weight": "700" } };
                    } else {
                        return { css: { "color": "black", "font-weight": "normal" } };
                    }
                }
            },
            {
                field: 'cycleTimeTrend',
                title: '平均cycle time变化趋势(相较上月)',
                formatter: function(value, row, index) {
                    if (null == value) {
                        return;
                    }
                    if ("没有变化" === value) {
                        return value;
                    }
                    var trend = value.substring(0,1);
                    var trendValue = value.substring(1, value.length);
                    if (Object.is("↓", trend)) {
                        return '<div class="font-bold text-navy">' + trendValue + '<i class="fa fa-level-down"></i></div>';
                    } else {
                        return '<div class="font-bold text-danger">' + trendValue + '<i class="fa fa-level-up"></i></div>';
                    }
                    // return '<a class="" onclick="sumNumClick(\'' + row.partId + '\')">' + row.partId + '</a>';
                }
            }
        ];

        // x轴的刻度
        var xData = [[${timeFlagMonth}]];

        // 重点产品进度统计
        var staPartType = [[${importantPartType}]];
        var partTypeAverDaysList = [[${partTypeAverDays}]];
        // 彩虹七色+黑色
        const colorstrs = [
            '#ff0000',
            '#ff6100',
            '#00ff00',
            '#0000ff',
            '#a020f0',
            '#000000',
            '#082e54',
            '#ffff00'
        ];
        var chartOptionSeries = [];
        var chartOptions = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
                axisPointer:{
                    type:'cross', // 伴随着鼠标的移动，横向的虚线
                }
            },
            legend: {
                itemStyle: { opacity: 0 },//去圆点
                textStyle: {
                    fontSize: 14,//字体大小
                    color: '#000000'//字体颜色
                },
                data: staPartType
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}   //下载为图片
                }
            },
            xAxis: {
                name:'统计月份',
                type: 'category',
                boundaryGap: false,     //控制折线起点
                data: xData
            },
            yAxis: {
                name:'天数',
                // min:0,  //取0为最小刻度
                // max: 100, //取100为最大刻度
                //
                // min:'dataMin', //取最小值为最小刻度
                // max: 'dataMax', //取最大值为最大刻度

                min: 0, //取最小值为最小刻度
                max: 'dataMax', //取最大值为最大刻度

                // min: function(value) {//取最小值向下取整为最小刻度
                //     return Math.floor(value.min)
                // },
                // max: function(value) {//取最大值向上取整为最大刻度
                //     return  Math.ceil(value.max)
                // },

                scale: true, //自适应
                minInterval: 0.1, //分割刻度
                maxInterval: 50,
                axisLabel:{
                    color: "#000000",
                    fontSize: 13,
                    showMinLabel: true, //不显示最小刻度线值
                    showMaxLabel: true //不显示最大刻度线值
                },
                axisLine: {
                    lineStyle: {
                        color: "#000000", //最左侧Y轴颜色
                    }
                },
                splitLine: { //刻度的多条横线
                    show: true
                }
            },
            series: chartOptionSeries
        };

        var options = {
            url: prefix + "/list",
            exportUrl: prefix + "/export",
            modalName: "产品CYCLE TIME统计",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            queryParams: queryParams,
            // showFooter: true,
            // footerStyle: footerStyle,
            columns: column
        };

        $(function() {
            layui.use('laydate', function(){
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#timeFlag',
                    type: 'month',
                    value: new Date()
                });
            });
            $.table.init(options);

            var chartDom = document.getElementById("echarts-line-chart");
            var lineChart = echarts.init(chartDom);
            //设置参数
            setChartOptions();
            // 指定图表的配置项和数据

            // 使用刚指定的配置项和数据显示图表。
            lineChart.setOption(chartOptions);
            $(window).resize(lineChart.resize);

        });

        function setChartOptions() {
            partTypeAverDaysList.forEach( (item, index) => {
                chartOptionSeries.push({
                    type: 'line',
                    name: item.partType,
                    itemStyle: {
                        normal: {
                            color: colorstrs[index],
                            lineStyle: {
                                color: colorstrs[index]
                            }
                        }
                    },
                    data: item.partAverDays
                });
            });
        }

        // 表格默认不初始化
        // var tableinit = [[${tableinit}]];
        // function query() {
        //     if (tableinit) {
        //         $.table.init(options);
        //         tableinit = false;
        //     } else {
        //         $.table.search();
        //     }
        // }

        function queryParams(params) {
            var search = $.table.queryParams(params);
            var timeFlag1 = $("#timeFlag").val();
            if (null == timeFlag1 || "" == timeFlag1) {
                var d = new Date();
                timeFlag1 = d.getFullYear() + "-" +((d.getMonth()+1)<10?"0":"")+(d.getMonth()+1);
            }
            search.timeFlag = timeFlag1;
            return search;
        }

        function footerStyle(column) {
            return {
//         	    userBalance: {
//         	        classes: 'class'
//         	    },
                qty: {
                    css: { color: 'red', 'font-weight': 'normal' }
                }
            }[column.field]
        }
    </script>
</body>
</html>